<template>
  <div>
    <page-view>
      <template #option>
        <div class="btn-box">
          <el-button @click="exportExcel" :disabled="loading">导出</el-button>
          <el-button @click="router.back(-1)">返回</el-button>
        </div>
      </template>

      <template #form>
        <SearchForm :data-form="formInline" @on-search="onSearch" @onReset="onReset">
          <el-form-item prop="flowInstanceCode" label-width="60px">
            <el-input placeholder="请输入流程编号" v-model="formInline.flowInstanceCode" clearable></el-input>
          </el-form-item>
          <el-form-item prop="writeFormName" label-width="60px">
            <el-input placeholder="请输入表单名称" v-model="formInline.writeFormName" clearable></el-input>
          </el-form-item>
          <el-form-item prop="createUserName" label-width="60px">
            <el-input placeholder="请输入申请人" v-model="formInline.createUserName" clearable></el-input>
          </el-form-item>

          <el-form-item prop="date">
            <el-date-picker v-model="formInline.date" type="datetimerange" range-separator="至" start-placeholder="发起开始时间"
              end-placeholder="发起结束时间" clearable value-format="YYYY-MM-DD HH:mm:ss"/>
          </el-form-item>
          <el-form-item prop="upDate">
            <el-date-picker v-model="formInline.upDate" type="datetimerange" range-separator="至"
              start-placeholder="更新开始时间" end-placeholder="更新结束时间" clearable value-format="YYYY-MM-DD HH:mm:ss" />
          </el-form-item>

        </SearchForm>
      </template>
      <template #table="tableScope">
        <PubilcTable :table-data="tableData" :isSlot="false" :list-config="CHANGE_DETAIL_CONFIG" :page-data="pageData"
          :translateTextDeal="translateTextDeal" :tableHeight="tableScope.tableHeight" :loading="tableLoading"
          @on-action="onAction" />
      </template>
    </page-view>

  </div>
</template>
<script  setup name="Standard">
import { onMounted, reactive } from 'vue'
import { BUDGET_TYPE_LIST } from './Common/config'
import { statusText } from '@/util/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import { downloadFile } from '@/util/downFile'
import dayjs from 'dayjs'
import api from '@/api'
import { MoneyFormat } from '@/util/filterConfig'


const loading = ref(false)

const router = useRouter()

const route = useRoute()

const isAddTime = ref(false)

const formInline = ref({
  writeFormName: '',
  createUserName: '',
  date: [],
  endTime: '',
  startTime: '',
  budgetDetailStartTime: '',
  budgetDetailEndTime: '',
  flowInstanceCode: '',
  upDate: []
})
const pageData = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0
})
const tableData = ref([])

const tableLoading = ref(false)
// 调整明细查询列表
const CHANGE_DETAIL_CONFIG = ref([
  { alias: 'instanceCode', label: '流程ID', width: '160px' },
  { alias: 'writeFormName', label: '表单名称', showTooltip: true, width: '160px' },
  { alias: 'amount', label: route.query.type == 'USE' ? '费用金额' : '调整金额', type: 'translateText' },
  { alias: 'createUser', label: '申请人' },
  { alias: 'createTime', label: '发起日期', },
  { alias: 'budgetDetailCreateTime', label: '更新日期', },
  { alias: 'flowStatus', label: '流程状态', type: 'translateText' },
])


watch(() => formInline.value.date, (newVal) => {

  if (newVal && newVal.length > 0) {
    formInline.value.startTime = newVal[0]
    formInline.value.endTime = newVal[1]
  } else {
    formInline.value.startTime = ''
    formInline.value.endTime = ''
  }
})
watch(() => formInline.value.upDate, (newVal) => {

  if (newVal && newVal.length > 0) {
    formInline.value.budgetDetailStartTime = newVal[0]
    formInline.value.budgetDetailEndTime = newVal[1]
  } else {
    formInline.value.budgetDetailStartTime = ''
    formInline.value.budgetDetailEndTime = ''
  }
})

const onSearch = () => {
  pageData.value.pageNum = 1
  isAddTime.value = true
  getList()
}
const onReset = () => {
  setTimeout(() => {
      isAddTime.value = true
    onSearch()
  }, 100)
}

const getParams = () => {
  const { budgetNo, startTime, endTime, budgetCategoryRelationId, budgetDetailId } = route.query
 
  const parms = {
    ...pageData.value,
    ...formInline.value,
    budgetNo,
    budgetCategoryRelationId
  }
  if (startTime && !isAddTime.value) {
    formInline.value.upDate = [startTime, endTime]
    parms.budgetDetailStartTime = startTime
    parms.budgetDetailEndTime = endTime
  }
  if (budgetDetailId) parms.budgetDetailId = budgetDetailId

  parms.type = route.meta.type
  delete parms.date
  delete parms.upDate
  return parms
}
// 获取列表数据
const getList = () => {

  tableLoading.value = true

  api.budgetConfig.budgetQueryDetailPage(getParams()).then(res => {

    const { list, total } = res
    pageData.value.total = total
    tableData.value = list
    tableLoading.value = false
  })

}

// 导出
const exportExcel = (row) => {
  loading.value = true
  tableLoading.value = true
  const pageType = route.meta.type
  api.budgetConfig.budgetQueryDetailExport(getParams()).then((res) => {
    const nameObj = {
      'USE': '预算-单据清单明细',
      'ADJUSTMENT': '预算-调整明细'
    }
    downloadFile(res, nameObj[pageType], 'xlsx')
    ElMessage({
      type: 'success',
      message: '导出成功!'
    });
    loading.value = false
    tableLoading.value = false
  })
}

const translateTextDeal = (item, val, row) => {
  let text = ''
  if (item.alias == 'amount') text = val ? `￥${MoneyFormat(val)}` : ''
  if (item.alias == 'flowStatus') {
    const map = [
      { label: '手动结束', value: '0' },
      { label: '流转完成', value: '1' },
      { label: '进行中', value: '2' }
    ]
    text = statusText(map, val)
  }
  return text

}
// 列表操作 分页
const onAction = ([item, row]) => {
  const obj = {
    'pageNum': getList,
    'pageSize': onSearch
  }
  if (typeof item === 'string') {
    pageData.value[item] = row
    obj[item]()
  } else {
    obj[item.alias](row)
  }
}
onMounted(() => {
  getList()

})
</script>
